<template>
    <div class="app-container">
        <el-form :model="main.queryParams" size="small" :inline="true" v-show="main.showSearch">
            <el-form-item label="选择酒店" prop="hotelName">
                <el-select v-model="main.queryParams.hotelId" filterable placeholder="请选择">
                    <el-option v-for="item in main.hotelListAll" :key="item.hotelId" :label="item.hotelName"
                        :value="item.hotelId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleHouseQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="updateRoomName">一键更新房型名称</el-button>
                <el-button type="warning" icon="el-icon-download" size="mini"
                    @click="openElongHousePage">艺龙标准库导入</el-button>
                <el-button type="success" icon="el-icon-edit" size="mini" @click="openPriceEnter">范围录入</el-button>
                <el-button size="mini" @click="positioningTime('front')">前十天</el-button>
                <el-date-picker v-model="main.startTime" type="date" placeholder="选择日期"
                    style="margin-left: 10px;margin-right: 10px;" @change="startTimeChange">
                </el-date-picker>
                <el-button size="mini" @click="positioningTime('after')">后十天</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="main.loading" :data="main.houseList" @selection-change="selectionHouseList" border>
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column v-for="column in main.columnList1" :key="column.filedValue" :prop="column.filedValue"
                :label="column.filedName" align="center">
            </el-table-column>
            <el-table-column v-for="column in main.columnList2" align="center" :key="column.filedValue"
                :prop="column.filedValue" :label="column.filedName">
            </el-table-column>
        </el-table>

        <el-dialog title="艺龙标准库导入" :visible.sync="elongHousePage.isShow" width="1270px" append-to-body>
            <el-table v-loading="elongHousePage.loading" :data="elongHousePage.houseList"
                @selection-change="selectionChangEelongHouseList">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="房型名称" prop="RoomName" width="140px" />
                <el-table-column label="房型ID" prop="RoomID" width="100px" />
                <el-table-column label="床型" prop="BedType" width="120px" />
                <el-table-column label="面积" prop="Area" width="100px" />
                <el-table-column label="房间数" prop="RoomNum" align="center" width="220px">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.RoomNum" :min="0"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="最大入住人数" prop="MaxNum" align="center" width="220px">
                    <template slot="header">
                        <span>最大入住人数 <span style="color: red;">*</span></span>
                    </template>
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.MaxNum" placeholder="请选择">
                            <el-option key="1" label="1" value="1" />
                            <el-option key="2" label="2" value="2" />
                            <el-option key="3" label="3" value="3" />
                            <el-option key="4" label="4" value="4" />
                            <el-option key="5" label="5" value="5" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="含餐情况" prop="RPList" width="280px">
                    <template slot="header">
                        <span>含餐情况 <span style="color: red;">*</span></span>
                    </template>
                    <template slot-scope="scope">
                        <el-checkbox-group v-model="scope.row.RPList">
                            <el-checkbox label="不含早" name="1"></el-checkbox>
                            <el-checkbox label="含单早" name="2"></el-checkbox>
                            <el-checkbox label="含双早" name="3"></el-checkbox>
                            <el-checkbox label="含三早" name="4"></el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postAddElongHouse">确 定</el-button>
                <el-button @click="closeAddElongHouse">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="范围录入" :visible.sync="priceEnter.isShow" width="1120px" append-to-body>
            <div class="priceEnterHead">
                <el-date-picker v-model="main.rangeDate" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange"></el-date-picker>
                <!-- 加上key的原因是选择酒店时会重新加载该组件以获取该酒店的周末星期 -->
                <WeekEnd :hotelId="main.queryParams.hotelId" :key="main.queryParams.hotelId" class="weekEndVue" />
            </div>

            <el-table :data="main.selectHouseList" style="margin-top: 10px;">
                <el-table-column label="房型名称" prop="houseName" width="200px" />
                <el-table-column label="早餐" prop="rpName" align="center" width="70px" />
                <el-table-column label="日期范围" prop="RQRange" align="center" width="360px">
                    <template slot="header">
                        <span>日期范围 <span style="color: red;">*</span></span>
                    </template>
                    <template slot-scope="scope">
                        <el-date-picker v-model="scope.row.RQRange" value-format="yyyy-MM-dd" type="daterange"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column label="平日" prop="rpPrice" align="center" width="225px">
                    <template slot="header">
                        <span>平日 <span style="color: red;">*</span></span>
                    </template>
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.rpPrice" :min="0"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="周末" prop="rpPriceWeekend" align="center" width="225px">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.rpPriceWeekend" :min="0"></el-input-number>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postPriceEnter" :loading="priceEnter.loading">确 定</el-button>
                <el-button @click="closePriceEnter">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import { getHotelListAll } from "@/api/hotel/hotel";
import { getElongHouseList, postAddElongHouse, getHouseList, postUpdateRoomName } from "@/api/hotel/house";
import { postPriceEnter } from "@/api/hotel/rp";
import WeekEnd from '../week_end/index.vue'
import { getWeekDay } from '@/utils/timing-order'

export default {
    name: 'House',
    components: {
        WeekEnd
    },
    data() {
        return {
            main: {
                loading: false,
                showSearch: true,
                queryParams: {
                    hotelId: undefined
                },
                hotelListAll: [],
                houseList: [],

                // 基础字段
                columnList1: [],
                // 日期字段
                columnList2: [],
                selectHouseList: [],
                rangeDate: [],

                // 起始时间
                startTime: undefined,
                // 表格时间区间
                columnDateRange: []

            },
            elongHousePage: {
                isShow: false,
                loading: false,
                houseList: [],
                selectHouseList: []
            },
            priceEnter: {
                isShow: false,
                loading: false
            }
        }
    },
    mounted() {

    },
    created() {
        this.getHotelListAll();

        // 表格字段
        this.getColumnList();

        if (this.$route.query.hotelId) {
            this.main.queryParams.hotelId = Number(this.$route.query.hotelId);
            this.getHouseList()
        }
    },
    methods: {
        getHouseList() {
            if (this.main.queryParams.hotelId) {
                this.main.loading = true;
                getHouseList({ hotelId: this.main.queryParams.hotelId, columnDateRange: this.main.columnDateRange }).then(response => {
                    this.main.houseList = response.data;
                    this.main.loading = false;
                }
                );
            } else {
                this.$message.error('请选择酒店');
            }
        },
        // 获取所有酒店数据,用于酒店下拉框
        getHotelListAll() {
            getHotelListAll().then(response => {
                this.main.hotelListAll = response.data;
            }
            );
        },
        getElongHouseList() {
            this.elongHousePage.loading = true;
            getElongHouseList(this.main.queryParams).then(response => {
                this.elongHousePage.houseList = response.data.Rooms;
                this.elongHousePage.loading = false;
            }
            );
        },
        openElongHousePage() {
            if (this.main.queryParams.hotelId) {
                this.getElongHouseList();
                this.elongHousePage.isShow = true;
            } else {
                this.$message.error('请选择酒店');
            }
        },
        closeAddElongHouse() {
            this.elongHousePage.isShow = false;
        },
        selectionChangEelongHouseList(selection) {
            this.elongHousePage.selectHouseList = selection;
        },
        postAddElongHouse() {
            let selectHouseList = this.elongHousePage.selectHouseList;
            if (selectHouseList.length == 0) {
                this.$message.error('请选择房型');
                return;
            }

            for (let i = 0; i < selectHouseList.length; i++) {
                if (!selectHouseList[i].MaxNum) {
                    this.$message.error('请补齐最大入住人数');
                    return;
                }

                if (selectHouseList[i].RPList.length == 0) {
                    this.$message.error('请选择含餐情况');
                    return;
                }
            }

            let that = this;
            this.$modal.confirm('是否添加物理房型').then(function () {
                const obj = {};
                obj.data = JSON.stringify(selectHouseList);
                obj.hotelId = that.main.queryParams.hotelId;
                return postAddElongHouse(obj);
            }).then((res) => {
                if (res.code == 200) {
                    this.$modal.msgSuccess("添加成功");
                    this.elongHousePage.isShow = false;
                    this.getHouseList();
                }
            })
        },
        handleHouseQuery() {
            if (this.main.queryParams.hotelId) {
                this.getHouseList();
            } else {
                this.$message.error('请选择酒店');
            }
        },
        getColumnList() {
            this.main.columnList1.push({ filedName: '酒店ID', filedValue: 'hotelId' })
            this.main.columnList1.push({ filedName: '房型名称', filedValue: 'houseName' })
            this.main.columnList1.push({ filedName: '早餐', filedValue: 'rpName' })

            // 获取当前时间
            this.main.startTime = new Date();
            // 取10天间隔时间
            this.main.columnDateRange = this.getNextNDays();
            // 初始化日期字段
            this.handleColumn2();
        },
        positioningTime(type) {
            if (type === 'after') {
                // 获取后十天
                this.main.startTime = this.getFutureDate(10);
            } else {
                // 获取前十天
                this.main.startTime = this.getFutureDate(-10);
            }
            // 取10天间隔时间
            this.main.columnDateRange = this.getNextNDays();
            // 初始化日期字段
            this.handleColumn2();
            // 获取数据
            this.getHouseList();
        },
        startTimeChange() {
            // 取10天间隔时间
            this.main.columnDateRange = this.getNextNDays();
            // 初始化日期字段
            this.handleColumn2();
            // 获取数据
            this.getHouseList();
        },
        handleColumn2() {
            this.main.columnList2 = [];
            let days = this.main.columnDateRange;
            for (let i = 0; i < days.length; i++) {
                const day = days[i];
                const weekDay = getWeekDay(day);
                const pro = day.replaceAll('-', '_');
                this.main.columnList2.push({
                    filedName: day.substring(5, day.length) + '[' + weekDay + ']',
                    filedValue: 'price_' + pro
                })
            }
        },
        selectionHouseList(selection) {
            this.main.selectHouseList = selection;
        },
        openPriceEnter() {
            if (this.main.selectHouseList.length === 0) {
                this.$message.error('未选中房型');
                return;
            }
            this.priceEnter.isShow = true;
        },
        getNextNDays() {
            let dates = [];
            for (let i = 0; i <= 9; i++) {
                // 使用Date对象生成日期，并格式化为YYYY-MM-DD
                let date = this.getFutureDate(i);
                let dateStr = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
                dates.push(dateStr);
            }
            return dates;
        },
        getFutureDate(days) {
            const future = new Date(this.main.startTime);
            future.setDate(this.main.startTime.getDate() + days);
            return future;
        },
        postPriceEnter() {
            for (let i = 0; i < this.main.selectHouseList.length; i++) {
                const obj = this.main.selectHouseList[i]
                if (!obj.RQRange || obj.RQRange.length === 0) {
                    this.$message.error('未选择日期');
                    return;
                }

                if (!obj.rpPrice) {
                    this.$message.error('未输入采购价');
                    return;
                }
            }
            this.priceEnter.loading = true;
            postPriceEnter({ dataStr: JSON.stringify(this.main.selectHouseList), hotelId: this.main.queryParams.hotelId }).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("录入成功");
                    this.priceEnter.loading = false;
                    this.priceEnter.isShow = false;
                    this.getHouseList();
                } else {
                    this.$message.error(res.msg);
                }

            });
        },
        closePriceEnter() {
            this.priceEnter.isShow = false;
        },
        handleDateChange() {
            for (let i = 0; i < this.main.selectHouseList.length; i++) {
                this.main.selectHouseList[i].RQRange = this.main.rangeDate;
            }
        },
        updateRoomName() {
            if (this.main.queryParams.hotelId) {
                postUpdateRoomName(this.main.queryParams).then(response => {
                    if (response.code === 200) {
                        this.$modal.msgSuccess("更新成功");
                        this.getHouseList();
                    }
                })
            } else {
                this.$message.error('请选择酒店');
            }
        }
    },
    computed: {

    }
}
</script>

<style>
.priceEnterHead {
    display: flex;
    align-items: center;
}

.weekEndVue {
    margin-left: 30px;
}
</style>